import React, { Component } from 'react';
import styled from 'styled-components/native';
import Touchable from '@appandflow/touchable';

import SignupForm from '../components/SignupForm';

const Root = styled.View`
  flex: 1;
  background-color: ${props => props.theme.DARK_BACKGROUND};
  position: relative;
`;

const RegisterButton = styled(Touchable).attrs({
  feedback: 'opacity'
})`
  height: 75;
  width: 150;
  background-color: ${props => props.theme.PRIMARY};
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30%;
  right: 0;
  border-top-left-radius: 20;
  border-bottom-left-radius: 20;
  shadow-opacity: 0.4;
  shadow-radius: 5;
  shadow-offset: 0 5px;
  shadow-color: #000;
  elevation: 5;
`;

const RegisterButtonText = styled.Text`
  color: ${props => props.theme.WHITE};
  font-size: 20;
  font-weight: bold;
`;

const BottomTextContainer = styled.View`
  width: 100%;
  height: 200;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
`;

const LoginButton = styled(Touchable).attrs({
  feedback: 'opacity',
  hitSlop: {top: 20, right: 20, bottom: 20, left: 20}
})`
  justify-content: center;
  align-items: center;
  padding: 20px;
`;

const LoginButtonText = styled.Text`
  font-size: 16;
  color: ${props => props.theme.WHITE};
  font-weight: bold;
`;

const initState = {
  showLogin: true,
  showSignup: false
};

class AuthenticationScreen extends Component {
  state = initState;

  _onRegisterButtonPressed = () => this.setState({ showSignup: true });

  _showLoginView = () => this.setState({ ...initState });

  render() {
    if (this.state.showSignup) {
      return (
        <Root>
          <SignupForm onBackPress={this._showLoginView} />
        </Root>
      );
    }
    return (
      <Root>
        <RegisterButton onPress={this._onRegisterButtonPressed}>
          <RegisterButtonText>Get Started</RegisterButtonText>
        </RegisterButton>
        <BottomTextContainer>
          <LoginButton>
            <LoginButtonText>Already have an account?</LoginButtonText>
          </LoginButton>
        </BottomTextContainer>
      </Root>
    );
  }
}

export default AuthenticationScreen;
